<template>
  <div class="menu-wrapper">
    <!-- 左侧主菜单 -->
    <div class="main-menu">
      <div class="menu-item" 
           v-for="(item, index) in menuData" 
           :key="index"
           @mouseenter="showSubmenu(index)"
           @mouseleave="hideSubmenu(index)">
        {{ item.title }}
        
        <!-- 子菜单 -->
        <div class="submenu" 
             v-if="item.isHover"
             @mouseenter="keepSubmenu(index)"
             @mouseleave="hideSubmenu(index)">
          <div class="submenu-section" 
               v-for="(section, sIndex) in item.children" 
               :key="sIndex">
            <div class="submenu-title">{{ section.title }}</div>
            <div class="submenu-items">
              <span v-for="(subItem, subIndex) in section.items" 
                    :key="subIndex"
                    class="submenu-item">
                {{ subItem }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.menu-wrapper {
  position: relative;
  width: 235px; /* 设置固定宽度 */
}

.main-menu {
  background: #826c5b; /* 设置背景色 */
  width: 100%;
}

.menu-item {
  position: relative;
  padding: 12px 20px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.menu-item:hover {
  background: #6c5844;
}

.submenu {
  position: absolute;
  left: 235px; /* 与主菜单宽度相同 */
  top: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  min-width: 600px;
  z-index: 100;
  padding: 20px;
  border-radius: 4px;
}

.submenu-section {
  margin-bottom: 20px;
}

.submenu-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  font-size: 14px;
}

.submenu-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.submenu-item {
  padding: 5px 10px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.submenu-item:hover {
  color: #ff6700;
}
</style>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          title: '有品推荐',
          isHover: false,
          children: [
            { title: '精选分类' },
            { title: '精选专区' }
          ]
        },
        // ... 其他菜单项
      ]
    }
  },
  methods: {
    showSubmenu(index) {
      // 先重置所有菜单项
      this.menuData.forEach(item => item.isHover = false);
      // 设置当前菜单项
      this.menuData[index].isHover = true;
    },
    hideSubmenu(index) {
      setTimeout(() => {
        this.menuData[index].isHover = false;
      }, 100);
    },
    keepSubmenu(index) {
      this.menuData[index].isHover = true;
    }
  }
}
</script>